<template>
  <div class="Graguatedmain-content">
    <select name="年份" id="change">
      <option value="">2024</option>
      <option value="">2023</option>
      <option value="">2022</option>
      <option value="">2021</option>
      <option value="">2020</option>
      <option value="">2019</option>
    </select>
    <div id="Graguatedmain"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import { TooltipComponent, GridComponent } from "echarts/components";
import { PictorialBarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
export default {
  name: "GraduatedComponents",
  data() {
    return {
      info: [],
      xueyuan: [
        // "管理学院",
        // "外语学院",
        // "电信与智能制造学院",
        // "商学院",
        // "计算机与软件工程学院",
        // "医学院",
      ],
      sum: [],
      work: [],
      radio: [],
      status: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/collegeratio/rate/1年`),
        method: "get",
      }).then((response) => {
        // console.log("就业率排名,", response.data.data);
        this.info = response.data.data;
        this.$nextTick(() => {
          for (let index in this.info) {
            if (response.data.data[index].college == "电信与智能制造学院") {
              this.xueyuan.push("电信学院");
            } else if (
              response.data.data[index].college == "计算机与软件工程学院"
            ) {
              this.xueyuan.push("计软学院");
            } else {
              this.xueyuan.push(response.data.data[index].college);
            }
            // this.xueyuan.push(response.data.data[index].college);
            this.sum.push(response.data.data[index].allnumber);
            this.work.push(response.data.data[index].employmentOk);
          }
          this.initialize();
        });
      });
    },
    initialize() {
      echarts.use([
        TooltipComponent,
        GridComponent,
        PictorialBarChart,
        CanvasRenderer,
      ]);

      var chartDom = document.getElementById("Graguatedmain");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      // 计算就业率
      for (let i = 0; i < this.sum.length; i++) {
        this.radio.push({
          value: ((this.work[i] / this.sum[i]) * 100).toFixed(2),
          originalIndex: i,
        });
      }

      // 对就业率数组进行排序
      this.radio.sort((a, b) => b.value - a.value);

      option = {
        grid: {
          top: "5%", // 调整这里的数值来控制下移的距离
          bottom: "20%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            const dataIndex = params[0].dataIndex;
            const value = params[0].value;
            const rank = dataIndex + 1;

            return (
              params[0].name +
              "<br>" +
              "排名：" +
              rank +
              "<br>" +
              "就业率：" +
              value +
              "%"
            );
          },
        },
        xAxis: {
          data: this.radio.map((item) => this.xueyuan[item.originalIndex]),
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: "#e54035",
          },
        },
        yAxis: {
          name: "就业率排名",
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
        },
        color: ["#e54035"],
        series: [
          {
            name: "hill",
            type: "pictorialBar",
            barCategoryGap: "-130%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              opacity: 0.5,
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: this.radio.map((item) => item.value),
            z: 10,
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
};
</script>

<style scoped>
.Graguatedmain-content {
  width: 100%;
  height: 100%;

  border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
#Graguatedmain {
  width: 100%;
  height: 90%;
}
/* .Graguatedmain-content{
  float: right;
} */
</style>